<template>
  <view class="task-step">
    <!-- <u-steps :list="numList" :current="0" direction="column" /> -->
    <view v-for="(item, index) in list" :key="index" class="task-step-box">
      <view class="task-step-box-top">
        <u-image v-if="index === (list.length - 1) && status === 4" class="task-step-box-point" width="14px" height="14px" :src="imgStep0" />
        <u-image v-else class="task-step-box-point" width="14px" height="14px" :src="imgStep1" />
        <view class="task-step-box-role">{{ item.editUserTypeName }}</view>
      </view>
      <view class="task-step-box-content">
        <view class="task-step-box-content-right">
          <view class="task-step-box-content-top">
            <!-- <u-image width="30px" height="30px" :src="item.img" /> -->
            <u-avatar
              :src="item.img"
              size="60"
            />
            <text class="task-step-box-content-top-name">{{ item.editUser.trueName }}</text>
          </view>
          <view :class="['task-step-box-content-text', index === (list.length - 1) && status === 4 && 'task-step-box-content-text-reviewer', index === (list.length - 1) && status === 2 && 'task-step-box-content-text-end']">{{ item.content }}</view>
          <view v-viewer="{movable:false}" class="task-step-box-content-img">
            <u-image v-for="(item1,index1) in item.imgArr" :key="index1" class="task-step-box-content-img-child" width="54px" height="54px" :src="item1.imgurl" border-radius="4px" />
          </view>
          <view class="task-step-box-content-time">{{ item.editTime }}</view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [
        // { editName: '王德发', talk: '不做', time: '2021-01-01', role: '发起人', head: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg', url: [
        //   { url: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg' },
        //   { url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621500011&t=d5a8a6c688c529040b63d556a544312b' },
        //   { url: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg' },
        //   { url: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=1.jpg' },
        //   { url: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg' },
        //   { url: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg' },
        //   { url: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg' }
        // ] },
        // { name: '王德发', talk: '不同一', time: '2021-01-01', role: '审核人人', head: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg', url: [
        //   { url: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg' },
        //   { url: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg' },
        //   { url: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg' }
        // ] },
        // { name: '王德发', talk: '不同一', time: '2021-01-01', role: '审核人人', head: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg', url: [
        //   { url: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg' },
        //   { url: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg' },
        //   { url: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2471826223,1654648024&fm=26&gp=0.jpg' }
        // ] }
      ]
    },
    status: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // numList: [{
      //   name: '发起人'
      // }, {
      //   name: '审批人'
      // }]
      imgStep0: require('@/static/img/task/step0.png'),
      imgStep1: require('@/static/img/task/step1.png')
    };
  },
  created() {

  },
  methods: {
    // getAvatar() {
    //   for (const key in userMap) {
    //     const { avatarId: avatar, avatar: avatarId, editUser } = userMap[key];
    //     getUserAvatar({ avatar, avatarId }).then(img => {
    //       this.taskList.forEach(comment => {
    //         if (comment.contentType === 2 && comment.cardMsg.editUser === editUser) {
    //           comment.cardMsg.avatar = img;
    //         }
    //       });
    //     });
    //   }
    // }
  }
};
</script>

<style lang="scss" scoped>
.task-step{
  margin: 15px;
  .task-step-box{
    padding-bottom: 15px;
    .task-step-box-top{
      display: flex;
      .task-step-box-role{
        padding-left: 9px;
        color: #909399;
        font-size: 14px;
      }
    }
    .task-step-box-content{
      margin-left: 7px;
      padding-left: 15px;
      // padding-right: 24px;
      border-left: 1px solid #eee;
      .task-step-box-content-right{
        background-color: #f5f7fa;
        border-radius: 9px;
        padding: 12px;
        margin-top: 4px;
      }
      .task-step-box-content-top{
        display: flex;
        .task-step-box-content-top-name{
          color: #606266;
          font-size: 14px;
          height: 30px;
          line-height: 30px;
          padding-left: 7px;
        }
      }
      .task-step-box-content-text{
        color: #606266;
        font-size: 14px;
        padding-top: 14px;
        padding-bottom: 14px;
      }
      .task-step-box-content-text-reviewer{
        color: #b6b9bf;
      }
      .task-step-box-content-text-end{
        color: #19be6b;
      }
      .task-step-box-content-img{
        display: flex;
        flex-wrap: wrap;
        .task-step-box-content-img-child{
          margin-right: 4px;
          margin-bottom: 4px;
        }
      }
      .task-step-box-content-time{
        font-size: 10px;
        color: #909399;
        text-align: right;
      }
    }
  }
}
</style>
